<template>
  <div>
    <!--    标题-->
    <el-row>
      <el-col :span="24"><h1 style="text-align: center;font-family: '华文宋体'">客户管理</h1></el-col>
    </el-row>
    <!--    表格-->
    <el-row>
      <el-col :span="24">
        <el-table :data="cutBean.records" style="width: 100%;border-top: solid 1px black;height: 200px">
          <el-table-column prop="name" label="客户名称" />
          <el-table-column prop="leadingCadre" label="负责人" />
          <el-table-column prop="cusRange" label="经营范围" />
          <el-table-column fixed="right" label="操作" >
            <template #default="scope">
              <el-button type="primary" size="small" @click="infoVisible=true,findById(scope.row.id)">查看
                <el-icon>
                  <Grape/>
                </el-icon>
              </el-button>

              <el-button type="primary" size="small" @click="updateVisible=true,findById(scope.row.id)">修改
                <el-icon>
                  <Grape/>
                </el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--   分页 -->
    <el-pagination
        v-model:currentPage="cutBean.current"
        v-model:page-size="cutBean.size"
        background
        layout="prev, pager, next, jumper"
        :total="cutBean.total"
        @current-change="findByItem"
    />
    <el-row style="margin-top: 50px">
      <el-col :span="5"></el-col>
      <!--      添加按钮-->
      <el-col :span="8">
        <el-button @click="addVisible=true">
          添加客户
        </el-button>
      </el-col>
      <!--      右边部分-->
      <el-col :span="9"
              style="border: 2px solid black;height: 200px;line-height: 50px;text-align: start;font-weight: bold;background-color:whitesmoke ">
        <div class="">
          <el-row>

            <el-col :span="8">
              客户名称：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.name">
            </el-col>
          </el-row>

        </div>
        <div>
          <el-row>
            <el-col :span="8">
              经营范围 ：
            </el-col>
            <el-col :span="7">
              <input type="text" v-model="findObj.cusRange">
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row>
            <el-col :span="13"></el-col>
            <el-col :span="5">
              <el-button type="primary" @click="findByItem(1)">
                <el-icon>
                  <Coffee/>
                </el-icon>
                搜索
              </el-button>
            </el-col>
          </el-row>

        </div>
      </el-col>
    </el-row>
    <!--查看-->
    <el-dialog
        v-model="infoVisible"
        title="客户信息"
        width="40%"
    >
      <el-row style="width: 100%;line-height: 40px">
        <el-col :span="4">
          <p>客户名称:</p>
          <p>负责人: </p>
          <p>负责人电话: </p>
        </el-col>
        <el-col :span="1"/>
        <el-col :span="7">
          <p>{{ customerObj.name }}</p>
          <p>{{ customerObj.leadingCadre }}</p>
          <p>{{ customerObj.phone }}</p>
        </el-col>
        <el-col :span="4">
          <p>邮箱：</p>
          <p>供应商地址:</p>
          <p>经营范围: </p>
        </el-col>
        <el-col :span="7">
          <p>{{ customerObj.email }}</p>
          <p>{{ customerObj.address }}</p>
          <p>{{ customerObj.cusRange }}</p>
        </el-col>
      </el-row>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="infoVisible = false">确定</el-button>
      </span>
      </template>
    </el-dialog>

    <!--      修改信息弹出框-->
    <el-dialog
        v-model="updateVisible"
        title="修改客户信息"
        width="50%"
    >

      <el-row style="width: 100%;line-height: 40px">
        <el-col :span="4">
          <p>客户名称:</p>
          <p>负责人: </p>
          <p>负责人电话: </p>
        </el-col>
        <el-col :span="7">
          <p> {{ updateObj.name }}</p>
          <p>
            <el-input v-model="updateObj.leadingCadre"/>
          </p>
          <p>
            <el-input v-model="updateObj.phone"/>
          </p>
        </el-col>
        <el-col :span="1"/>
        <el-col :span="3">
          <p>邮箱：</p>
          <p>供应商地址:</p>
          <p>经营范围: </p>
        </el-col>
        <el-col :span="7">
          <p>{{ updateObj.email }}</p>
          <p>{{ updateObj.address }}</p>
          <p>
            <el-input v-model="updateObj.cusRange"/>
          </p>
        </el-col>
      </el-row>

      <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateVisible = false,update()">修改</el-button>
      </span>
      </template>
    </el-dialog>

    <!--  添加div -->
    <el-dialog
        v-model="addVisible"
        title="添加客户信息"
        width="50%"
    >
      <el-row style="width: 100%;line-height: 40px">
        <el-col :span="4">
          <p>客户名称:</p>
          <p>负责人: </p>
          <p>负责人电话: </p>
        </el-col>
        <el-col :span="7">
          <p>
            <el-input v-model="addObj.name"/>
          </p>
          <p>
            <el-input v-model="addObj.leadingCadre"/>
          </p>
          <p>
            <el-input v-model="addObj.phone"/>
          </p>
        </el-col>
        <el-col :span="1"/>
        <el-col :span="3">
          <p>邮箱：</p>
          <p>供应商地址:</p>
          <p>经营范围: </p>
        </el-col>
        <el-col :span="7">
          <p>
            <el-input v-model="addObj.email"/>
          </p>
          <p>
            <el-input v-model="addObj.address"/>
          </p>
          <p>
            <el-input v-model="addObj.cusRange"/>
          </p>
        </el-col>
      </el-row>

      <template #footer>
      <span class="dialog-footer">
         <el-button @click="addVisible = false">取消</el-button>
        <el-button @click="addVisible = false,addClient()">添加</el-button>
      </span>
      </template>
    </el-dialog>


  </div>


</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      cutBean: {},
      findObj: {},
      addVisible: false,
      infoVisible: false,
      updateVisible: false,
      customerObj: {},
      addObj: {},
      updateObj: {},


    }
  },
  methods: {
    findByItem(pageNO) {
      this.findObj.pageNO = pageNO;
      axios.get("/project/customer/findByItem", {params: this.findObj}).then(resp => {
        this.cutBean = resp.data;
      });
    },
    findById(id) {
      axios.get("/project/customer/findById", {
        params: {
          id
        }
      }).then(resp => {
        this.customerObj = resp.data;

        this.updateObj = resp.data;

      })

    },
    update() {
      axios.get("/project/customer/update", {
        params: {
          id:this.updateObj.id,
          leadingCadre: this.updateObj.leadingCadre,
          phone: this.updateObj.phone,
          cusRange: this.updateObj.cusRange
        }
      }).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      })

    },
    addClient() {
      axios.get("/project/customer/add", {params: this.addObj}).then(resp => {
        if (resp.data == "ok") {
          this.findByItem(1);
        }
      });
    }
  },
  created() {
    this.findByItem(1);
  }
}
</script>

<style scoped>

</style>